<template>
	<view class="wanlfind-follow-container">
		<wanl-navbar :isBack="true" :background="{background: '#FF7F00',}"  :showGongNeng="true"
		             :gongnengColor="'#fff'"
		             :backIconColor="'#fff'">
			<text
				slot="content"
				style="color: #fff; width: 100%;padding-left: 20rpx;"
			>
				神话App
			</text>
		</wanl-navbar>
		<view class="auth">
			<view class="auth-title">请输入密码</view>
			<view class="codes">
				<view v-for="item in config.count" :key="item.key">
					<view class="input" @tap="hanldeOpenKeyboard" :class="{ active: currentFocus == item.index }">
						<template v-if="code[item.index - 1] != undefined">
							{{ code[item.index - 1] }}
						</template>
						<template v-else>
							<view v-if="currentFocus == item.index" class="shining"></view>
						</template>
					</view>
				</view>
			</view>
			<view style="width: 100%;display: flex;justify-content: center;margin-top: 140rpx">
				<view @click="sendMessage" style="width: 60%;border-radius: 20rpx;background: #FF7F00;color: #fff;text-align: center;padding: 24rpx 0;font-size: 34rpx"    >
					登录
				</view>
			</view>
			
		</view>
		<wanl-captcha ref="wanlCaptcha" />
		<wanl-keyboard :open="keyboardVisible" @number="inputCode" @delete="deleteCode" @empty="emptyCode" @close="keyboardVisible = false" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			config: {
				count: [
					{
						index: 1,
						key: 'valid-code-input-1'
					},
					{
						index: 2,
						key: 'valid-code-input-2'
					},
					{
						index: 3,
						key: 'valid-code-input-3'
					},
					{
						index: 4,
						key: 'valid-code-input-4'
					},
					{
						index: 5,
						key: 'valid-code-input-5'
					},
					{
						index: 6,
						key: 'valid-code-input-6'
					}
				]
			},
			keyboardVisible: true,
			currentFocus: 1,
			mobile: '',
			code: [],
			style: {
				inputWidth: '40upx',
				inputHeight: '100upx'
			},
			countdown: 60,
			cTimer: null,
			event: '',
			pageroute: ''
		};
	},
	onLoad(options) {
		this.mobile = options.mobile;
		this.event = options.event;
		this.pageroute = options.url;
	},
	methods: {
		// async
		sendMessage() {
			var that = this;
			console.log(this.code.length)
			if (this.code.length == 6) {
				uni.request({
					url: '/wanlshop/user/write_login',
					method: 'POST',
					data:{
						pwd: this.code.join(''),
					},
					success: res => {
						if(res.res.code == 1){
							uni.setStorageSync('hexiaoMima',this.code.join(''))
							that.$wanlshop.to(`/pages/apps/jinyuanbao/hexiao/hexiao`)
						}else{
							uni.showToast({
								title:'密码错误',
								icon:'none'
							})
						}
						
						
					}
				});
			}
			// await
			
		},
		inputCode(e) {
			this.code[this.currentFocus - 1] = e;
			
			if (this.currentFocus <= 6) {
				this.currentFocus++;
			}
			console.log("===this.code",this.code)
		},
		deleteCode() {
			this.currentFocus--;
			this.code.splice(-1, 1);
		},
		emptyCode(){
			this.code = [];
			this.currentFocus = 0;
		},
		hanldeOpenKeyboard() {
			this.keyboardVisible = true;
		},
	}
	
}
</script>

<style>
@import url("auth.css");
</style>